<template>
	<view>
		<view class="listbox" v-for="(item,index) in list" :key="index" @click="todetail(item)">
			<view class="goodsimg">
				<image :src="item.url"></image>
			</view>
			<view class="goodsinfo">
				<view class="goodsname"><text v-if="item.store_name"
						style="color: #D5A974;">{{item.store_name}}|</text>{{item.goods_name}}</view>
				<view class="goodsspec"  v-if="item.tags">
					<view class="specitem" v-for="(specitem,specindex) in item.tags" :key="specindex">
						{{item.tags}}
					</view>
				</view>
				<!-- is_seck 0否  1是 -->
				<view style="margin-top: 20rpx;" v-if="item.is_seck==1&&(item.seck_end_time*1000)>time>=(item.seck_start_time*1000)">
					<countdown  :startTime="dateFormat(item.seck_start_time)" :endTime="dateFormat(item.seck_end_time)" />
				</view>
				<view class="salesnum">
					<view>已销 {{item.sales_actual+item.sales_initial}}</view>
					<!-- <view class="logosbox" style="background-color: #FD3C22;" v-if="item.ship_method==1">邮寄
					</view>
					<view class="logosbox" style="background-color: #FD3C22;" v-if="item.ship_method==2">自提/隔日配送</view> -->
					<view class="logosbox" style="background-color: #FD3C22;margin-left: 10rpx;"
					 v-if="item.is_seck==1&&(item.seck_end_time*1000)>time>=(item.seck_start_time*1000)">
						秒杀
					</view>
				</view>

				<view class="goodsprice">
					<text>￥</text>
					{{item.goods_price_min}}
					<text
						style="text-decoration: line-through;margin-left: 20rpx;color: #888888;">￥{{item.line_price_min}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import countdown from '@/components/cz-countdown/cz-countdown.vue'
	export default {
		name: "goodsone",
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		components: {
			countdown
		},
		data() {
			return {
				time: new Date().getTime(),
			};
		},
		onShow() {
			// this.time =  new Date();
			// console.log(this.time,'time')
		},
		methods: {
			todetail(item) {
				uni.navigateTo({
					url: '/pageshop/goodsinfo/goodsinfo?id=' + item.id
				})
			},
			//过滤器 用于格式化时间
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute + ":" + second;
				// 返回 2020-02-01 00:00:00
				return result;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.listbox {
		width: 690rpx;
		margin: 0 auto 10rpx auto;
		display: flex;
		align-items: center;

		.goodsimg {
			width: 300rpx;
			height: 280rpx;
			background: #FFFFFF;
			border-radius: 7rpx;

			image {
				width: 280rpx;
				height: 280rpx;
				border-radius: 7rpx;
			}
		}

		.goodsinfo {
			width: 390rpx;

			.goodsname {
				width: 390rpx;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.goodsspec {
				display: flex;
				margin: 24rpx 0;

				.specitem {
					width: fit-content;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #555555;
					padding: 0 6rpx;
					height: 34rpx;
					background: #F1F1F1;
					border-radius: 8rpx;
					margin-right: 6rpx;
				}
			}

			.salesnum {
				font-size: 26rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #555555;
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.logosbox {
					width: fit-content;
					padding: 0 15rpx;
					border-radius: 13rpx;
					color: #FFF;
					height: 35rpx;
					line-height: 35rpx;
					font-size: 26rpx;
					margin-left: 20rpx;
				}
			}

			.logobox {
				width: fit-content;
				padding: 0 15rpx;
				border-radius: 13rpx;
				color: #FFF;
				height: 35rpx;
				line-height: 35rpx;
				font-size: 26rpx;


			}

			.goodsprice {
				font-size: 40rpx;
				color: #222222;
				margin-top: 15rpx;

				>text {
					font-size: 20rpx;
					font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
					font-weight: normal;
				}
			}
		}
	}
</style>